<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Hotspot</title>
    <link rel="stylesheet" type="text/css" href="../static/css/mainhotspot.css">
    <link rel="stylesheet" type="text/css" href="../static/css/pure-min.css">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="../static/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript"  src="../static/js/echarts.min.js"></script>
    <script type="text/javascript"  src="../static/js/china.js"></script>
    <script type="text/javascript" src="../static/js/main.js"></script>
</head>

<body>
    <div class="body_bg"><img src="../static/image/bg.jpg" ></div>
    <div class="keli" style="position:fixed; width:100%; height:100%; z-index:-1">
        <div class="head"style="height: 60px;">
            <a href = "/">
                <img src="../static/image/keli_logo2.png" >
            </a>
        </div>
        <div class="content">
              <div class="content_q">
               <a href="/">首页</a>
              </div>
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9" style="height:100%;">
                 <div id="map" style="height:95%;"> </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="height:100%;">
               <div class="circle" >
                    <div id="data" style="height:300px;"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
// 全国设备分布详细
  function getUrlParam(key){
        // 获取参数
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
    }
    var p=getUrlParam('p');
   function getChartData() {
            $("#map").html('');
             var myChart=echarts.init(document.getElementById('map'));
            var options = myChart.getOption();
            //通过Ajax获取数据
            $.ajax({
                type : "get",
                async : true, //同步执行
                url : "/keli/api/v1.0/devices/",
                data : {},
                dataType : "json", //返回数据形式为json
                success : function(result) {
                        options = {
                            tooltip: {
								trigger: 'item',
								formatter: function (params) {
								  return params.name + " 设备数 ：" + params.data.total;
								}
							  },
                            visualMap: {
                                min: 0,
                                max: 600,
                                left: 'left',
                                top: 'bottom',
                                // text: ['高','低'],           // 文本，默认为数值文本#}
                                // calculable: false,
                                inRange: {
                                    color: ['#e0ffff', '#006edd']
                                },
                                seriesIndex: [2],
                                show: false
                            },
                            geo: {
                                map: 'china',
                                roam: false,
                                label: {
                                    emphasis: {
                                        show: true
                                    },
                                    normal: {
                                        show: false,
                                        textStyle: {
                                            color: 'rgba(0,0,0,0.4)'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        opacity:0.7,
                                        shadowColor: 'rgba(0,0,0,0.9)',
                                        shadowOffsetY:10,
                                        shadowOffsetX:-10,
                                        borderColor: 'black',
                                        areaColor: 'rgba(0,0,0,0.5)',
                                        borderWidth:'2'
                                    },
                                    emphasis:{
                                        areaColor: null,
                                        shadowOffsetX: 2,
                                        shadowOffsetY: 20,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                              series : [
                                {
                                    type: 'scatter',
                                    coordinateSystem: 'geo',
                                    data: convertData(result.provinces),
                                    symbolSize: 5,
                                     rippleEffect: {
                                            period: 6,
                                            scale: 10,
                                            brushType: 'stroke',
                                    },
                                    label: {
                                        normal: {
                                            formatter: '{b}',
                                            position: 'right',
                                            show: false
                                        },
                                        emphasis: {
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                             color: 'red',
                                             shadowBlur: 10,
                                             shadowColor: 'red',
                                                }
                                            }
                                        },
                                    {
                                    type: 'effectScatter',
                                    coordinateSystem: 'geo',
                                     data: convertData(result.provinces.sort(function (a, b) {
                                                return (b.online + b.offline) - (a.online + a.offline);
                                              }).slice(0, 8)),
                                    symbolSize: 8,
                                    showEffectOn: 'render',
                                    rippleEffect: {
                                            brushType: 'stroke',
                                            period: 10,
                                            scale: 5,
                                          },
                                    hoverAnimation: false,
                                    label: {
                                        normal: {
                                            formatter: '{b}',
                                            position: 'right',
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: 'red',
                                            shadowBlur: 10,
                                            shadowColor: 'red'
                                        }
                                    },
                                },
                                {
                                        name: '设备',
                                        type: 'map',
                                        mapType: 'china',
                                        geoIndex: 0,
                                        roam: false,
                                        label: {
                                            normal: {
                                                show: true,
                                                textStyle: {
                                                    color: '#333',
                                                    fontSize:12,
                                                }
                                            }
                                        },
                                        data:convertMapData(result.provinces)
                                    },
                            ]


                        };
                        myChart.setOption(options);
                    },
                error : function(errorMsg) {
                    alert("不好意思，图表请求数据失败啦!");
                    myChart.hideLoading();
                }
            });
             myChart.on('click', function (params) {
                window.location.href = '/Devices/?p=' + params.name+'';
            });
        }
    function getCircleData() {
        $.ajax({
            type : "get",
            async : true, //同步执行
            url : "/keli/api/v1.0/devices/",
            data : {},
            dataType : "json", //返回数据形式为json
            success : function(result) {
                options = {
                    color: ['#cd5658', '#60b3df'],
                    text: {
                        text: '设备数量',
                        textStyle: {
                            fontsize: '18',
                            color: '#000'
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        orient: 'horizontal',
                        x: 'center',
                        y: 'top',
                        textStyle: {
                            color: '#fff'
                        },
                        data: ['在线数量', '非在线数量']
                    },
                    calculable: true,
                    series: [
                        {
                            name:'全国',
                            type: 'pie',
                            radius: ['0%', '55%'],
                            itemStyle: {
                                normal: {
                                    opacity:1,
                                    shadowColor: 'rgba(0,0,0,1)',
                                    shadowBlur: 20,
                                    borderColor: 'white',
                                    borderWidth:'1',
                                    label: {
                                        show: true,
                                    },
                                    labelLine: {
                                        show: true,
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        position: 'center',
                                        textStyle: {
                                            fontSize: '15',
                                            fontWeight: 'bold'
                                        }
                                    }
                                }
                            },
                            data: [
                                {value: result.offline, name: '非在线数量'},
                                {value: result.online, name: '在线数量'}

                            ]
                        }
                    ]
                };
                 syChart.setOption(options);
            },
            error : function(errorMsg) {
                alert("不好意思，图表请求数据失败啦!");
                syChart.hideLoading();
            }
        });
    }
    var syChart=echarts.init(document.getElementById('data'));
        var geoCoordMap = {
        '浙江':[119.825591,30.071947],
        '甘肃':[104.224683,35.417025],
        '青海':[97.555194,37.070609],
        '四川':[101.690103,30.682215],
        '贵州':[106.655426,27.582253],
        '湖北':[111.806669,31.443315],
        '广东':[113.235903,23.188997],
        '山西':[111.698233,36.408645],
        '北京':[116.359456,40.155229],
        '上海':[121.398599,31.489148],
        '重庆':[106.438732,29.74249],
        '天津':[117.145959,39.170347],
        '黑龙江':[126.48553,45.94058],
        '吉林':[125.160925,43.901789],
        '福建':[117.8956,27.168039],
        '河北':[115.044594,38.751867],
        '山东':[118.175009,36.121971],
        '辽宁':[123.435847,41.824117],
        '河南':[113.793577,33.13108],
        '江苏':[120.014738,33.265699],
        '湖南':[111.512313,29.015201],
        '江西':[115.806076,28.737241],
        '云南':[102.808134,24.925796],
        '台湾':[121.016646,23.732095],
        '海南':[110.19879,20.062616],
        '陕西':[109.231048,35.752362],
        '安徽':[116.734845,33.280912],
        '内蒙古':[112.030311,41.44568],
        '广西':[108.315666,22.863803],
        '西藏':[91.125808,30.709936],
        '新疆':[82.262558,41.074186],
        '宁夏':[106.290355,37.746496],
        '澳门':[113.524107,22.204874],
        '香港':[114.177211,22.31619],
    };

        getChartData()
        $(window).resize(function(){getChartData()})
        getCircleData()
        function convertData(data) {
             var res = []
             for (var i = 0; i < data.length; i++) {
             var dataprovince=data[i].province;
             if (data[i].province != null) {

                 if((data[i].province=="内蒙古自治区")||(data[i].province=='黑龙江省'))
                 {
                    dataprovince = data[i].province.substring(0,3);
                 }
                 else
                 {
                    dataprovince = data[i].province.substring(0,2);
                 }
             }
            console.log(dataprovince);
            var geoCoord = geoCoordMap[dataprovince];
            var total = +data[i].online + data[i].offline;
            if (geoCoord) {
                res.push({
                    name: dataprovince,
                    value: geoCoord.concat(data[i],8),
                    total: total
                });
            }
        }
        return res;
    };

    function convertMapData(data) {
         var res = []
         for (var i = 0; i < data.length; i++) {
            var dataprovince=data[i].province;
             if (data[i].province != null) {
                 if((data[i].province=="黑龙江省")||(data[i].province=='内蒙古自治区'))
                 {
                     dataprovince = dataprovince.substring(0,3);
                 }
                 else {
                     dataprovince = dataprovince.substring(0,2);
                 }

             }
            console.log(dataprovince);
            var geoCoord = geoCoordMap[dataprovince];
            var total = +data[i].online + data[i].offline;
            if (geoCoord) {
                res.push({
                    name: dataprovince,
                    value: total,
                    total: total,
                });
            }
        }

        return res;
    };


</script>
